<template>
  <section class="todoapp">
    <!-- header -->
    <div class="current-header">
            待办事项
          </div>
    <!-- main section -->
    <section v-show="todos.length" class="main">
      <ul class="todo-list">
        <todo
          v-for="(todo, index) in filteredTodos"
          :key="index"
          :todo="todo"
        />
      </ul>
    </section>
    <section v-show="!todos.length" class="nodata-container">
      <span>暂无代办事项！</span>
    </section>
  </section>
</template>

<script>
import Todo from './Todo.vue'
import { mapGetters } from "vuex";
import { fetchProjectList } from '@/api/project';
import {checkPermission} from '@/utils/permission';
import { getMidEndDate } from '@/utils/date'
;
const STORAGE_KEY = 'todos'
const filters = {
  all: todos => todos,
}

export default {
  components: { Todo },
  filters: {
    pluralize: (n, w) => n === 1 ? w : w + 's',
    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  },
  data() {
    return {
      visibility: 'all',
      todoList: [],
      filters,
      // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
      todos: []
    }
  },
  created() {
    this.getProjectList();
  },
  computed: {
    ...mapGetters(["id"]),
    filteredTodos() {
      return filters[this.visibility](this.todos)
    },
    remaining() {
      return this.todos.filter(todo => !todo.done).length
    }
  },
  methods: {
    getProjectList() {
        this.listLoading = true;
        fetchProjectList().then((res) => {
          const dataList = res.data
          dataList.forEach((item) => {
            if (item.projectStatus === "项目未立项") {
              if (item.projectInformationCheckStatus === "科研处立项预审中" && checkPermission(['项目信息审批：预审'])) {
                this.todoList.push({name: item.projectName, state: "待进行立项预审", date: item.projectStartDate});
              } else if(item.projectInformationCheckStatus === "专家立项伦理审查中" && checkPermission(['项目信息审批：伦理'])) {
                this.todoList.push({name: item.projectName, state: "待进行立项伦理审查", date: item.projectStartDate});
              }  else if(item.projectInformationCheckStatus === "领导立项总审查中" && checkPermission(['项目信息审批：总审批'])) {
                this.todoList.push({name: item.projectName, state: "待进行立项总审查", date: item.projectStartDate});
              } else if( item.projectInformationCheckStatus === "财务立项审查中" && checkPermission(['项目信息审批：经费审批'])){
                this.todoList.push({name: item.projectName, state: "待进行立项财务审查", date: item.projectStartDate});
              }
            } else if (item.projectStatus === "项目进行中") {
              if( item.projectChangeStatus === "项目变更审批中" && checkPermission(['项目审批：变更'])){
                this.todoList.push({name: item.projectName, state: "待进行变更审批", date: item.projectExpectedEndDate});
              } else if (item.projectCheckStatus === "提交项目中检报告" && item.projectOwnerId === this.id) {
                this.todoList.push({name: item.projectName, state: "待提交中检报告", date: getMidEndDate(item.projectStartDate ,item.projectExpectedEndDate)});
              } else if( item.projectCheckStatus === "项目中期报告审批中" && checkPermission(['项目审批：中检'])){
                this.todoList.push({name: item.projectName, state: "待进行中检审批", date: getMidEndDate(item.projectStartDate ,item.projectExpectedEndDate)});
              } else if (item.projectCheckStatus === "提交项目结项报告" && item.projectOwnerId === this.id) {
                this.todoList.push({name: item.projectName, state: "待提交结项报告", date: item.projectExpectedEndDate});
              } else if( item.projectCheckStatus === "项目结项报告审批中" && checkPermission(['项目审批：结项'])){
                this.todoList.push({name: item.projectName, state: "待进行结项审批", date: item.projectExpectedEndDate});
              }
            }
          });
          this.todos = this.todoList;
          this.listLoading = false;
        });
      },
    addTodo(e) {
      const text = e.target.value
      if (text.trim()) {
        this.todos.push({
          text,
          done: false
        })
        this.setLocalStorage()
      }
      e.target.value = ''
    },
    toggleTodo(val) {
      val.done = !val.done
      this.setLocalStorage()
    },
    deleteTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
      this.setLocalStorage()
    },
    editTodo({ todo, value }) {
      todo.text = value
      this.setLocalStorage()
    },
    clearCompleted() {
      this.todos = this.todos.filter(todo => !todo.done)
      this.setLocalStorage()
    },
    toggleAll({ done }) {
      this.todos.forEach(todo => {
        todo.done = done
        this.setLocalStorage()
      })
    }
  }
}
</script>

<style lang="scss">
  @import './index.scss';

  .todoapp {
    min-height: 516px;
  }

  .nodata-container {
    text-align: center;
    vertical-align: middle;
    line-height: 350px;
  }

  .current-header {
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-weight: 700;
    color: #909399;
    padding: 15px 0 10px 10px;
    line-height: 23px !important;
  }


</style>
